<template>
  <div>
    <h1>监听字符串</h1>
    <el-input type="text" placeholder="请输入内容" v-model="content" style="width:200px"/>
    <h1>监听数组</h1>
    <h2>watch监听不了数组，只能监听数组某个元素</h2>
    <h3>使用deep监听</h3>
    <ul>
      <li v-for="(pos,index) in arr" :key="index">
        {{pos.name}}
        :
        {{pos.age}}
      </li>
    </ul>
    <el-button type="primary" @click="changeArr">改变数组内容</el-button>
  </div>
</template>

<script>
export default {
  name: "watcher",
  data() {
    return {
      content: undefined,
      arr:[{name:'张三',age:22},{name:'李四',age:20}],
    }
  },
  watch: {
    content:{
      handler(newVal,oldVal){
        console.log(newVal,oldVal)
        if(newVal === '100'){
          console.log('success')

        }
      }
    },
    arr:{
      handler(newVal,oldVal){
        console.log(newVal[0].age,oldVal[0].age)
      },
      deep:true,
    }
  },
  methods: {
    changeArr(){
      this.arr[0].age = '30'
    }
  }
}
</script>

<style scoped>

</style>
